<template>
  <div class="local-page">
    <!-- 主标题栏 -->
    <div class="main-header">
      <div class="location">
        <span>济南</span>
        <img class="dropdown-arrow" :src="require('@/assets/images/center/my_coin_arrow.png')" alt="下拉箭头">
      </div>
      <div class="search-container">
        <img class="camera-icon" :src="require('@/assets/images/top/h_fy25_search_bar_scan.png')" alt="相机图标">
        <div class="search-keywords-container" id="searchKeywordsContainer">
          <div 
            class="search-keyword" 
            v-for="(keyword, index) in keywords" 
            :key="index" 
            :class="{ 
              active: currentKeywordIndex === index,
              'slide-out': previousKeywordIndex === index && currentKeywordIndex !== index
            }">
            {{ keyword }}
          </div>
        </div>
        <img class="search-icon" :src="require('@/assets/images/top/fy26_ic_photo_search_icon.png')" alt="搜索图标">
        <div style="width: 40px;height: 99%;background: #000;text-align: center;border-radius: 30px;display: flex; justify-content: center;">
          <img class="search-btn" :src="require('@/assets/images/top/ic_navibar_search.webp')" alt="搜索按钮">
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <a href="https://h5.m.goofish.com/wow/moyu/moyu-project/second-hand-cars/pages/home"><img width="100%" :src="require('@/assets/images/loc/f39cb08bc7ea55332fbfdab672b74447.jpg')" alt=""></a>
      <!-- 分页指示器 -->
      <div class="page-indicators">
        <div class="page-indicator active" data-page="0"></div>
        <div class="page-indicator" data-page="1"></div>
      </div>
      <img :src="require('@/assets/images/loc/banner.png')" width="100%" alt="">
      
      <!-- 推荐和全城导航 -->
      <div class="recommendation-header">
        <div class="recommendation-left">
          <span class="recommendation-title">推荐</span>
        </div>
        <div class="recommendation-right">
          <span class="city-text">全城</span>
          <img class="city-dropdown-arrow" :src="require('@/assets/images/center/my_coin_arrow.png')" alt="下拉箭头">
        </div>
      </div>
    </div>
    
    <div class="swipeable-item">
      <div class="mults-scroll-inner">
        <div class="feeds-item-column-wrap">
          <!-- 左列商品 -->
          <div class="feeds-item-column">
            <div class="feeds-item-wrap" v-for="(product, index) in leftColumnProducts" :key="'left-' + index">
              <div class="feeds-img-wrap">
                <img class="feeds-img" :src="product.image" :alt="product.title">
                <img v-if="product.hasVideo" class="feeds-video-icon" src="https://gw.alicdn.com/imgextra/i4/O1CN01s0HrpM1ExUEBB5TBG_!!6000000000418-2-tps-48-48.png" alt="视频图标">
                <div class="feeds-distance">
                  <img src="https://gw.alicdn.com/imgextra/i2/O1CN01aN8BaN1UcRsuOYbeu_!!6000000002538-2-tps-42-42.png" alt="距离图标">
                  <span class="feeds-distance-text">{{ product.distance }}</span>
                </div>
              </div>
              <div class="feeds-title-wrap">
                <span class="feeds-title">{{ product.title }}</span>
              </div>
              <div class="feeds-info">
                <div class="feeds-price-wrap">
                  <span class="feeds-price-unit">¥</span>
                  <span class="feeds-price-integer">{{ product.price }}</span>
                </div>
                <span class="feeds-hot-point-text">{{ product.likes }}</span>
              </div>
              <div class="feeds-seller-wrap">
                <div class="feeds-seller-info">
                  <img class="feeds-avatar" :src="product.avatar" alt="头像">
                  <span class="feeds-name">{{ product.seller }}</span>
                </div>
                <img class="feeds-zhima-pic" src="https://gw.alicdn.com/imgextra/i1/O1CN013TD0V022H6MbR2trG_!!6000000007094-2-tps-240-48.png" alt="芝麻信用">
              </div>
            </div>
          </div>
          
          <!-- 右列商品 -->
          <div class="feeds-item-column">
            <div class="feeds-item-wrap" v-for="(product, index) in rightColumnProducts" :key="'right-' + index">
              <div class="feeds-img-wrap">
                <img class="feeds-img" :src="product.image" :alt="product.title">
                <img v-if="product.hasVideo" class="feeds-video-icon" src="https://gw.alicdn.com/imgextra/i4/O1CN01s0HrpM1ExUEBB5TBG_!!6000000000418-2-tps-48-48.png" alt="视频图标">
                <div class="feeds-distance">
                  <img src="https://gw.alicdn.com/imgextra/i2/O1CN01aN8BaN1UcRsuOYbeu_!!6000000002538-2-tps-42-42.png" alt="距离图标">
                  <span class="feeds-distance-text">{{ product.distance }}</span>
                </div>
              </div>
              <div class="feeds-title-wrap">
                <span class="feeds-title">{{ product.title }}</span>
              </div>
              <div class="feeds-info">
                <div class="feeds-price-wrap">
                  <span class="feeds-price-unit">¥</span>
                  <span class="feeds-price-integer">{{ product.price }}</span>
                </div>
                <span class="feeds-hot-point-text">{{ product.likes }}</span>
              </div>
              <div class="feeds-seller-wrap">
                <div class="feeds-seller-info">
                  <img class="feeds-avatar" :src="product.avatar" alt="头像">
                  <span class="feeds-name">{{ product.seller }}</span>
                </div>
                <img class="feeds-zhima-pic" src="https://gw.alicdn.com/imgextra/i1/O1CN013TD0V022H6MbR2trG_!!6000000007094-2-tps-240-48.png" alt="芝麻信用">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from './BottomNav.vue';

export default {
  name: 'LocalPage',
  components: {
    BottomNav
  },
  data() {
    return {
      currentKeywordIndex: 0,
      previousKeywordIndex: -1,
      keywords: ['便宜货', 'Python', 'cursor', 'data'],
      products: [
        // 左列商品
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01I66kge1tVuuV6ENKR_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '紫光变色龙，需要的私聊  感兴趣的话点"我想要"和我私聊吧～',
          price: '81',
          likes: '1人想要',
          distance: '1086.73km·天河区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2104775908&suffix=_120x120.jpg&needHttps=1',
          seller: '车***发'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01ngBHva1CSgcxMbXys_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '全新未拆封 苹果iphone15plus 全新原封未拆封未激活国行正品 温馨提示：需要什么型号配置颜色请咨询客服，批发行情每天实时更新，具体价格已下单时为准。 支持花呗付款 支持花呗付款 产品型号及规格如下： 苹果 iphone15Plus 128G 黑色（全新未拆封） 苹果 iphone1...',
          price: '4800',
          likes: '1500人想要',
          distance: '1956.38km·静安区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1729510080&suffix=_120x120.jpg&needHttps=1',
          seller: '上***品'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i4/O1CN01FliG5A1kW4SPRPHGU_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '全新戴尔360w电源  适用于戴尔3669 3668 5050 3050 7050 7070 7090 7080MT 戴尔长条形6针接口电源 通用型号：D500EPM-00 H460EBM-00 DPS-600EM-00 A H500EPM-00 新Dell...',
          price: '115',
          likes: '147人想要',
          distance: '1091.82km·从化区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2823534690&suffix=_120x120.jpg&needHttps=1',
          seller: '最***下'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i1/O1CN011UTFXi1ohl4ZDVxaZ_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: 'HTC 8X，绝版Windows操作系统，手感超级好，当个备用机，行车记录仪，或者单独当个相机完全没有问题，百十来块钱的东西，买不了吃亏，买不了上当[超便宜] 电信版： 黑色8成新机头一台，80元，如图 不讲价，不包邮！',
          price: '80',
          likes: '68人想要',
          distance: '2098.38km·东城区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=11855257&suffix=_120x120.jpg&needHttps=1',
          seller: '想***湖'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01f4bkpi1n5uhZli9To_!!53-fleamarket.heic_360x10000Q75.jpg_.webp',
          title: '鑫谷劲翔600走线王。额定功率 500W！  CPU供电8P！ 显卡供电8P+8P！ 硬盘SATA供电接口 3 个！ 大4p接口 2 个！ 需要电源线的另外加3块钱一条！',
          price: '50',
          likes: '53人想要',
          distance: '1171.63km·福田区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1059805039&suffix=_120x120.jpg&needHttps=1',
          seller: '台***售'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01trSTtr22y9fjoJ6oe_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '汽车店不做了，处理汽车电瓶充电器12V24V智能通用大功率全自动蓄电池快速充电机 300A：45元包邮 400A：59元包邮 600A: 75元包邮 智能电瓶修复汽车电瓶充电器12V24V伏通用摩托车货车轿车全自动大功率充满自停蓄电池充电机汽车电瓶充电器摩托车蓄电池充电机 微电脑控制，一键自动...',
          price: '40',
          likes: '8人想要',
          distance: '1752.33km·台前县',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2196267188&suffix=_120x120.jpg&needHttps=1',
          seller: '菩***树'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01hKP7t32JwdunLMsuV_!!53-fleamarket.heic_360x10000Q75.jpg_.webp',
          title: '索尼数据线S650  S700  S730 S750 S780 S800 S950 S980 S2100，1.5米包邮',
          price: '7',
          likes: '35人想要',
          distance: '1191.06km·惠城区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=75599486&suffix=_120x120.jpg&needHttps=1',
          seller: 'a***i'
        },
        {
          column: 'left',
          image: 'https://gw.alicdn.com/bao/uploaded/i4/O1CN01uFiA3W1PxSBO9F1z3_!!53-fleamarket.heic_360x10000Q75.jpg_.webp',
          title: 'Lenovo/联想台式机办公商用网课教学家用，其中包括主机、显示器、键盘、鼠标等基本配件。 【关于快递】三通一达随机发，需要加急可发顺丰。 【关于售后】如果商品非质量问题，买家需承担来回运费。商品如人为因素造成的损坏，一律不支持退货退款。 【粉丝福利】关注我，不定时上新品好物，喜欢捡漏的朋友不要错...',
          price: '1666',
          likes: '14人想要',
          distance: '1962.44km·浦东新区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=769591907&suffix=_120x120.jpg&needHttps=1',
          seller: '石***t',
          hasVideo: true
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i1/O1CN01wB1zBN1pFeC95kdAs_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '台式机 办公电脑 配置图片里都有 一共2台都带20寸显示屏  键盘 鼠标网线',
          price: '120',
          likes: '12人想要',
          distance: '3142.13km·道里区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2206547125331&suffix=_120x120.jpg&needHttps=1',
          seller: '待***郎'
        },
        // 右列商品
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN011sbskZ25It1Xr6b5b_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '三星Galaxy Chromebook 最漂亮的chrome book，4k oled屏幕，i5 16g 256g，带spen，稀有16g版本 13寸4k oled触控屏，10点触控，显示效果顶级 i5-10210U处理器，16g内存，256g固态硬盘 内置spen手写笔，完美支持触控 电池状态完美，...',
          price: '3699',
          likes: '16人想要',
          distance: '1155.07km·宝安区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=63227504&suffix=_120x120.jpg&needHttps=1',
          seller: '三***家'
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01hncZKn1fFWBFwOAKc_!!4611686018427385545-0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: '苹果13的手机壳四个，有一个是全新未用过，加一个全新苹果数据线，便宜出，手机壳很漂亮，喜欢的朋友联系，江浙沪皖包邮！',
          price: '12',
          likes: '2人想要',
          distance: '1720.30km·琅琊区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1796363977&suffix=_120x120.jpg&needHttps=1',
          seller: '梦***航'
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01ef6YLC1rqPSWhgTnS_!!4611686018427387810-0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: 'wacom kp504e全新未拆封笔pth460 660 860 ptk670 470(兼容） dth1320 1620 1321 1621 dtk1660 1661 2260 2261 dth1320 1620 dtk2420 2421 dth2420 2421 3220 3221 dth167原...',
          price: '389',
          likes: '193人想要',
          distance: '624.14km·简阳市',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2963275682&suffix=_120x120.jpg&needHttps=1',
          seller: 'w***售'
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01g1Eqhv1pPGPwecWWk_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: 'nisi耐司方形滤镜150mm GND 0.6 0.9 1.2方镜 软硬反向中灰渐变镜 ！150x170mm简称150系列 大支架灯泡头专用滤镜 NiSi 耐司100mm V6 风光版 镜支架套装 风光摄影 单反方镜支架风光版方形插片系统...',
          price: '728',
          likes: '37人想要',
          distance: '1077.30km·越秀区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2566475352&suffix=_120x120.jpg&needHttps=1',
          seller: '花***8'
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01DecRYP1TwmD7BSWQ7_!!4611686018427384255-0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: 'Win10Win11系统盘 系统pe 金士顿U盘 量产盘 电脑技术员U盘PE系统定制 ，防病，只读pe系统，多功能pe win11pe有声音 能联网是技术员的神器！ [绿圆][绿圆][绿圆][绿圆][绿圆][绿圆] 8G usb2.0 隐藏启动分区 pe＋正常U盘分区 16G usb3.0 可量...',
          price: '20',
          likes: '13人想要',
          distance: '1000.26km·汉台区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=532992447&suffix=_120x120.jpg&needHttps=1',
          seller: '数***友'
        },
        {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i4/O1CN01UCfX2v21tkQ2pcEpP_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp',
          title: 'EVOC - 研祥 104 - 1812CLD2N 工控主板  感兴趣的话点"我想要"和我私聊吧～',
          price: '588',
          likes: '4人想要',
          distance: '1498.73km·荥阳市',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1766929806&suffix=_120x120.jpg&needHttps=1',
          seller: '玛***玛'
        },
         {
          column: 'right',
          image: 'https://gw.alicdn.com/bao/uploaded/i4/O1CN01uFiA3W1PxSBO9F1z3_!!53-fleamarket.heic_360x10000Q75.jpg_.webp',
          title: 'Lenovo/联想台式机办公商用网课教学家用，其中包括主机、显示器、键盘、鼠标等基本配件。 【关于快递】三通一达随机发，需要加急可发顺丰。 【关于售后】如果商品非质量问题，买家需承担来回运费。商品如人为因素造成的损坏，一律不支持退货退款。 【粉丝福利】关注我，不定时上新品好物，喜欢捡漏的朋友不要错...',
          price: '1666',
          likes: '14人想要',
          distance: '1962.44km·浦东新区',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=769591907&suffix=_120x120.jpg&needHttps=1',
          seller: '石***t',
          hasVideo: true
        },
      ]
    }
  },
  computed: {
    leftColumnProducts() {
      return this.products.filter(p => p.column === 'left');
    },
    rightColumnProducts() {
      return this.products.filter(p => p.column === 'right');
    }
  },
  mounted() {
    // 实现关键词轮播效果
    this.startKeywordCarousel()
  },
  methods: {
    startKeywordCarousel() {
      setInterval(() => {
        this.previousKeywordIndex = this.currentKeywordIndex;
        this.currentKeywordIndex = (this.currentKeywordIndex + 1) % this.keywords.length;
      }, 2000)
    }
  }
};
</script>

<style scoped>
.local-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.4;
  padding-bottom: 60px;
  min-height: 100vh;
}
a, button, img, div[role="button"] {
  outline: none; /* 移除焦点轮廓 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的背景（适配 Safari/Chrome） */
}
/* 主标题栏 */
.main-header {
  display: flex;
  align-items: center;
  padding: 12px 1px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  margin-right: 5px;
  margin-left: 5px;
  padding-top: 20px;
}

.search-container {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 2.5px solid #333;
  border-radius: 20px;
  padding: 0px 0px 0px 12px;
  margin-right: 20px;
  transform: scale(1.02);
}

.search-icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}

/* 搜索关键词轮播容器 */
.search-keywords-container {
  position: relative;
  flex: 1;
  height: 20px;
  overflow: hidden;
}

.search-keyword {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  color: #999;
  line-height: 20px;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.search-keyword.active {
  transform: translateY(0);
  opacity: 1;
}

/* 关键字滑动向上消失 */
.search-keyword.slide-out {
  transform: translateY(-100%);
  opacity: 0;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 12px;
  cursor: pointer;
}

.location span {
  font-size: 14px;
  color: #333;
  margin-right: 4px;
  font-weight: bold;
}

.dropdown-arrow {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  filter: contrast(1.5) brightness(0.6) drop-shadow(0 0 1px #000);
}

.camera-icon {
  width: 20px;
  height: 20px;
  margin-right: 1px;
}

.search-btn {
  width: 24px;
  height: 24px;
  border-radius: 30px;
  padding: 0px;
}

/* 内容区域 */
.content-area {
  margin-top: 60px;
  padding: 20px 20px 0 20px;
}

/* 分页指示器 */
.page-indicators {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.page-indicator {
  height: 4px;
  border-radius: 2px;
  background: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 3px;
}

.page-indicator:first-child {
  width: 6px;
}

.page-indicator:last-child {
  width: 12px;
}

.page-indicator.active {
  background: #000;
}

/* 推荐和全城导航样式 */
.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 12px 16px 8px 16px;
  margin-top: -5px;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.recommendation-left {
  display: flex;
  align-items: center;
}

.recommendation-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  position: relative;
  left: -15px;
  font-family: 'PingFang SC', '苹方-简', 'Helvetica Neue', 'Microsoft YaHei', Arial, sans-serif;
  font-weight: 900;
  color: #000000;
  background: linear-gradient(to bottom, transparent 50%, #F9E951 50%);
  background-size: 100% 100%;
  border-radius: 2px;
  display: inline;
  line-height: inherit;
  white-space: nowrap;
}

.recommendation-right {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  left: 18px;
}

.city-text {
  font-size: 16px;
  color: #333;
  margin-right: 4px;
  font-weight: 700;
}

.city-dropdown-arrow {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  filter: contrast(1.5) brightness(0.6) drop-shadow(0 0 1px #000);
}

.swipeable-item {
  transform: translate3d(0px, 0px, 0px);
  transition-duration: 300ms;
  position: relative;
  margin-top: -5px;
}

.mults-scroll-inner {
  min-height: 1622px;
  opacity: 1;
  overflow: visible;
  height: auto;
}

.feeds-item-wrap {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.feeds-item-column-wrap {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0 10px;
}

.feeds-item-column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feeds-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.feeds-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: transparent;
}

.feeds-video-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
}

.feeds-distance {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 10px;
}

.feeds-distance img {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}

.feeds-distance-text {
  color: white;
  font-size: 12px;
}

.feeds-title-wrap {
  margin-top: 8px;
}

.feeds-title {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feeds-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.feeds-price-wrap {
  display: flex;
  align-items: baseline;
}

.feeds-price-unit {
  color: #ff4400;
  font-size: 12px;
}

.feeds-price-integer {
  color: #ff4400;
  font-size: 18px;
  font-weight: bold;
}

.feeds-hot-point-text {
  color: #999;
  font-size: 12px;
}

.feeds-seller-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.feeds-seller-info {
  display: flex;
  align-items: center;
}

.feeds-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 6px;
  object-fit: cover;
}

.feeds-name {
  font-size: 12px;
  color: #666;
}

.feeds-zhima-pic {
  width: 60px;
  height: 12px;
  object-fit: contain;
}
</style>
